<template>
    <div class="ul-radio-group clearfix" :class="{ 'is-radio': !multiple }">
        <el-checkbox-group v-model="selectedVal" :disabled="disabled">
            <el-checkbox v-for="item of selectOption" :label="item.value" :key="item.id" :disabled="disabledItem.includes(item.value)">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
import { dictionary, dictionaryByStatus } from "@/service/core/dictionary";
import { isArray } from "@/utils/Tools";

export default {
    name: 'commCheckbox', // checkbox组件二次封装 （支持单选多选）
    props: {
        code: { // 参数code
            type: String,
            default: ''
        },
        status: { // 查询指定状态下的参数  不传则查询启用状态下的
            type: String,
            default: ''
        },
        options: { // 外部传入的option 可替代请求项
            type: Array,
            default() {
                return []
            }
        },
        value: { // v-model绑定值
            type: [Array, String, Boolean],
            default() {
                return []
            }
        },
        label: { // label 绑定值
            type: [Array, String, Boolean],
            default() {
                return []
            }
        },
        multiple: { // 是否多选
            type: Boolean,
            default: false
        },
        disabled: { // 是否禁用
            type: Boolean,
            default: false
        },
        disabledItem: { // 单独设置不可编辑得选项
            type: Array,
            default() {
                return []
            }
        },
        defaultPara: { // 是否显示 默认参数 
            type: Boolean,
            default: false
        },
    },
    components: {},
    data() {
        return {
            selectOption: [],
        }
    },
    watch: {
        options(val) {
            if(isArray(val)) {
                this.selectOption = [...val];
                this.setDefaultVal(this.selectOption);
            } 
        },
        code(val) {
            if(val) {
                this.getOptions();
            }
        },
        value(val) {
            if(this.multiple) {
                if(val.length == 0) {
                    this._label = [];
                }
            }else {
                if(!val) {
                    this._label = '';
                }
            }
        }
    },
    computed: {
        selectedVal: {
            get: function() {
                if(this.multiple) {
                    return this.value
                }else {
                    return [this.value]
                }
            },
            set: function(val) {
                this.selectChange(val);
            }
        },
        _label: {
            get: function() {
                return this.label
            },
            set: function(val) {
                this.$emit('update:label', val);
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (this.code && this.options.length == 0) { // 如果code值不为空且options.lengt==0， 则去请求字典项
                this.getOptions();
            } else { // 否则直接获取外部传入的options
                this.selectOption = [...this.options];
                this.setDefaultVal(this.selectOption);
            }
        })
    },
    methods: {
        getOptions() { // 获取字典项
            if(this.status) { // 查询指定状态的参数
                dictionaryByStatus(this.code, this.status).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data)) {
                            data = data.map(item => {
                                return {
                                    ...item,
                                    label: item.name,
                                    value: item.valStr,
                                };
                            });
                            this.selectOption = [...data];
                            this.setDefaultVal(this.selectOption);
                        }
                    }
                });
            }else { // 默认查询指定状态下的参数
                dictionary(this.code).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data)) {
                            data = data.map(item => {
                                return {
                                    ...item,
                                    label: item.name,
                                    value: item.valStr,
                                };
                            });
                            this.selectOption = [...data];
                        }
                    }
                });
            }
        },
        selectChange(val) { // 选择事件
            if(this.multiple) { // 多选
                let label = this.selectOption.filter(v => val.findIndex(item => item == v.value) > -1).map(v => v.label);
                this._label = label;
                this.emitVal(val);
            }else { // 单选
                let selectVal = [];
                if(val.length == 0) {
                    selectVal = [];
                }
                if(val.length > 0) {
                    selectVal = val.slice(-1);
                }
                let label = this.selectOption.filter(v => selectVal.findIndex(item => item == v.value) > -1).map(v => v.label);
                this._label = label.join();
                this.emitVal(selectVal.join());
            }
        },
        // 提交值
        emitVal(val) {
            this.$emit('input', val);
            this.$emit('change', val);
        },
        setDefaultVal(options=[]) { // 设置默认值(只有值为空的情况下可以设置默认值)
            if(this.defaultPara) {
                let def = options.find(v => v.haveDefault == '1');
                if(def) {
                    if(!this.multiple) {
                        if(!this.value && this.value !== 0) {
                            this.$emit("input", def.value);
                            this.$emit('update:label', def.label);
                        }
                    }else {
                        if(this.value.length == 0) {
                            this.$emit("input", [def.value]);
                            this.$emit('update:label', [def.label]);
                        }
                    }
                }
            }
        },
    }
}
</script>

<style lang="scss">
.is-radio {
    .el-checkbox__inner {
        border-radius: 50%;
    }
}
</style>

